<template>
  <div>
    <a-alert type="info" >
      <template slot='message'>
        <a-row >
          <a-col :span='8'>总工单：{{ statistics.total }}</a-col>
          <a-col :span='8'>办结率：{{statistics.completionRate}}</a-col>
          <a-col :span='8'>环比：{{statistics.annulus}}</a-col>
        </a-row>
      </template>
    </a-alert>
    <a-table
      ref='table'
      size='middle'
      bordered
      childrenColumnName='childrenColumnName'
      :columns='columns'
      :dataSource='dataSource'
      :loading='loading'
      :pagination="false"
    >


      <template
        slot="action"
        slot-scope="text,record,index"
      >
        <a-input style="width:100%" v-model="record.addNum" @focus='handleInputFocus(record.addNum)' @blur='handleInputConfirm(record,index)' @keyup.enter='handleInputConfirm(record,index)'/>
      </template>
    </a-table>
  </div>
</template>

<script>
import ReportsEpidemicWeeklyService from '@/myService/ReportsEpidemicWeeklyService'
import moment from 'moment'

export default {
  name: 'Step3',
  data() {
    return {
      periodId:'',
      loading:false,
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => 1 + index
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '内容',
          align: 'center',
          dataIndex: 'content',
          ellipsis: true,
        },
        {
          title: '工单总数',
          align: 'center',
          dataIndex: 'summation',
          ellipsis: true,
        },
        {
          title: '环比（%）',
          align: 'center',
          dataIndex: 'annulus',
          ellipsis: true,
        },
        {
          title: '占比（%）',
          align: 'center',
          dataIndex: 'proportion',
          ellipsis: true,
        },
        {
          title: '额外数量',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      inputOld:undefined,
      statistics:{},
      beginDate:''
    }
  },
  created() {

  },
  methods:{
    begin(dateRange,periodId){
      this.beginDate=moment(dateRange[0]).format("YYYYMMDD");
      this.periodId=periodId;
      // await this.loadDate();
      this.loadDate();

    },

    async loadDate() {
      this.loading=true;
      let params={
        beginDate:this.beginDate,
        periodId:this.periodId,
      }
      console.log(params)
      await ReportsEpidemicWeeklyService.getPeriodPart2ByPeriodId(params).then(res=>{
        if (res.success) {
          this.dataSource = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(()=>{
        this.loading=false;
      })
      ReportsEpidemicWeeklyService.getPeriodStatisticsById(this.periodId).then(res=>{
        console.log(res)
        this.statistics=res.result
      })
    },
    handleInputFocus(val){
      this.inputOld=val;
    },
    handleInputConfirm(val,index){
      if(this.inputOld===val.addNum){
        return;
      }
      if(this.isNaturalNum(val.addNum)){
        let params={
          periodId:val.periodId,
          addNum:val.addNum,
          oldNum:this.inputOld,
          categoryId:val.categoryId,
        }
        console.log(params)
        console.log(val)
        ReportsEpidemicWeeklyService.editStatisticsCategoryAddNum(params).then(res=>{
            if(res.success){
              this.$message.success("更新成功")
              this.loadDate()
            }
        })
      }else {
        this.$message.error("非自然数")
        this.dataSource[index].addNum=this.inputOld
      }

    },
    isNaturalNum(num) {
        if(/^[0-9]+$/.test(num) && (num>=0)){
          return true;
        }else{
          return false;
        }
    }
  }
}
</script>

<style scoped>

</style>